<template>
  <div class="home-page" ref="homePage"
    @touchstart.stop="homeTouchStart"
    @touchmove.stop="homeTouchMove"
    @touchend="homeTouchEnd"
  >
    <transition name="vertical-fade">
      <div class="placeholder" v-show="showSearchTitle" ref="topPlaceHolder"></div>
    </transition>
    <div class="swiper-container">
      <swiper :options="swiperOption" ref="homeSwiper">
        <!-- slides -->
        <div is="swiper-slide" v-for="item in swiperList" :key="item.href">
          <a :href="item.href" target="_blank">
            <img width="100%" :src="item.imgSrc">
          </a>
        </div>
        <div class="swiper-pagination dots-wrapper" slot="pagination">
          <span v-for="(iDot, index) in dots" :key="iDot.id" class="dot" :class="{ active: swiperActiveIndex === index}"></span>
        </div>
      </swiper>
    </div>
    <!--
    <div class="goods-wrapper">
      <ul>
        <li v-for="goods in goodsList" :key="goods.article_id" @click="selectGoods(goods)">
          <goods :goods="goods"></goods>
        </li>
      </ul>
    </div>
    -->
    <article-list :articles="goodsList" @selectItem="selectGoods"></article-list>
    <div class="loading-wrapper">
      <scroll-loading v-show="loadingFlag && past_num >= 20"></scroll-loading>
    </div>
    <div class="fullscreen-loading-wrapper" v-show="loadingFlag && goodsList.length < 1">
      <div class="fullscreen-loading-inner">
        <div class="fs-loading">
          <fullscreen-loading></fullscreen-loading>
        </div>
      </div>
    </div>
    <top-tip ref="topTip" class="clsTopTip">
      <div class="top-tip-inner">
        {{topTipContent}}
      </div>
    </top-tip>
  </div>
</template>

<script type="text/ecmascript-6">
import Goods from 'components/goods/goods'
import ArticleList from 'components/article-list/article-list'
import { searchTitleMixin, scrollMixin, routeGoodsDetailMixn } from 'common/js/mixin'
import { getHomeList, getHomeSwiper } from 'api/homePage'
import ScrollLoading from 'base/scroll-loading/scroll-loading'
import FullscreenLoading from 'base/fullscreen-loading/fullscreen-loading'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import TopTip from 'base/top-tip/top-tip'
import { filterIds, filterList, genArrOfIds } from 'common/js/tools'

export default {
  name: 'home-page',
  mixins: [ searchTitleMixin, scrollMixin, routeGoodsDetailMixn ],
  components: { ArticleList, Goods, ScrollLoading, swiper, swiperSlide, FullscreenLoading, TopTip },
  data () {
    return {
      touchY: null,
      touchFlag: false,
      touchTimer: null,
      goodsList: [],
      mountedTimestamp: new Date().getTime(),
      hasLoadingIds: [],
      loadingFlag: false,
      past_num: 0,
      page_size: 20,
      swiperOption: {
        autoplay: 3000,
        // loop: true,
        onSlideChangeEnd: swiper => {
          this.onSlideChangeEnd(swiper)
        }
      },
      swiperList: [],
      swiperActiveIndex: 0,
      topTipContent: 0,
      topTipTimer: null
    }
  },
  computed: {
    swiper () {
      return this.$refs.homeSwiper.swiper
    },
    dots () {
      let dotsArr = []
      if (this.swiperList.length > 0) {
        for (let i = 0; i < this.swiperList.length; i++) {
          dotsArr.push({id: i})
        }
        return dotsArr
      } else {
        return dotsArr
      }
    }
  },
  methods: {
    scrollGotTop () {
      if (!this.showSearchTitle) {
        this.$store.commit('SET_SEARCH_TITLE', true)
      }
    },
    homeTouchStart (e) {
      this.touchFlag = true
      this.touchY = e.touches[0].clientY
    },
    homeTouchMove (e) {
      if (!this.touchFlag) return
      clearTimeout(this.touchTimer)
      this.touchTimer = setTimeout(() => {
        let moveTouchY = e.touches[0].clientY
        if ((this.touchY - moveTouchY) > 50 && this.showSearchTitle && this.currentScrollT > 30) {
          this.$store.commit('SET_SEARCH_TITLE', false)
        }
        if ((this.touchY - moveTouchY) < -40 && !this.showSearchTitle) {
          this.$store.commit('SET_SEARCH_TITLE', true)
        }
      }, 300)
    },
    homeTouchEnd (e) {
      this.touchFlag = false
    },
    enterHomePage () {
      this.$store.commit('SET_TABS_STATE', true)
      this.$store.commit('SET_SEARCH_TITLE', true)
    },
    selectGoods (goods) {
      this.routeToGoodsDetailPage(goods)
    },
    getMoreList () {
      if (this.loadingFlag) return // 如果数据正在加载的话，不进行重复加载
      this.loadingFlag = true
      getHomeList(this.past_num, this.mountedTimestamp).then((resp) => {
        if (resp.message === 1) {
          let newData = resp.data
          let arrIds = genArrOfIds(newData)
          let newValidIds = filterIds(arrIds, this.hasLoadingIds)
          let validItems = filterList(newValidIds, newData)
          this.goodsList = this.goodsList.concat(validItems)
          this.hasLoadingIds = this.hasLoadingIds.concat(newValidIds)
          this.past_num += this.page_size
          if (!validItems.length) {
            this.resetMountedTimestamp()
          }
          console.log('主页新加载了' + validItems.length + '条数据')
          this.showTopTip('新加载了' + validItems.length + '条数据')
        }
        this.loadingFlag = false
      }).catch(() => {
        this.loadingFlag = false
      })
    },
    getHomeSwiperList () {
      getHomeSwiper().then((resp) => {
        if (resp.message === 1) {
          this.swiperList = resp.data
        }
      })
    },
    onSlideChangeEnd (swiper) {
      this.swiperActiveIndex = swiper.activeIndex
      // console.log(swiper.activeIndex)
    },
    showTopTip (text) {
      if (this.topTipTimer) {
        clearTimeout(this.topTipTimer)
        this.$refs.topTip.hide()
      }
      this.topTipContent = text
      this.$refs.topTip.show()
      this.topTipTimer = setTimeout(() => {
        this.$refs.topTip.hide()
      }, 4000)
    }
  },
  mounted () {
    this.resetMountedTimestamp()
    // let scrollT = document.documentElement.scrollTop || document.body.scrollTop
    // scrollT = Math.ceil(scrollT)
    // let scrollH = document.documentElement.scrollHeight || document.body.scrollHeight
    // let clientH = window.innerHeight // document.documentElement.clientHeight || document.body.clientHeight
    // let appHeight = document.querySelector('#app').clientHeight
    // console.log('mounted', scrollT, scrollH, clientH, this.$refs.homePage.clientHeight, appHeight)
    this.getMoreList(this.past_num, this.mountedTimestamp)
    this.getHomeSwiperList()
    this.enterHomePage()
  },
  activated () {
    this.enterHomePage()
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.home-page
  overflow: hidden
  //padding-bottom: 60px // 64px
  background: #EEEEEE
  .placeholder
    width: 100%
    height: 40px
  .swiper-container
    width: 100%
    height: 0
    padding-bottom: 40%
    overflow: hidden
    .m-swiper-slide
      display: inline-block
      width: 100%
      height: 300px
    .dots-wrapper
      width: 100%
      text-align: center
      position: absolute
      bottom: 10px
      .dot
        display: inline-block
        width: 8px
        height: 8px
        border-radius: 50%
        background: rgba(0, 0, 0, .6)
        margin: 0px 6px
        &.active
          background: rgba(255, 255, 255, .8)
  .vertical-fade-enter-active, .vertical-fade-leave-active
    transition: height .3s
  .vertical-fade-enter, .vertical-fade-leave-to
    height: 0
  .goods-wrapper
    padding: 0px 5px
  .loading-wrapper
    width: 100%
    margin-bottom: 60px
  .fullscreen-loading-wrapper
    z-index: 11
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    background: #FFFFFE
    .fullscreen-loading-inner
      position: relative
      width: 100%
      height: 100%
      .fs-loading
        position: absolute
        width: 100%
        top: 50%
        text-align: center
        transform: translateY(-50%)
  >>>.clsTopTip
    position: fixed
    top: 40px
    text-align: center
    .top-tip-inner
      display: inline-block
      padding: 0 10px
      box-sizing: border-box
      font-size: 12px
      line-height: 24px
      border-radius: 12px
      background: #F04848
      color: #fff
</style>
